<template>
  <div class="warpper">
    <van-sticky :offset-top="46">
      <van-search v-model.trim="searchPar.keywords" shape="round" background="#ee0a24" clearable placeholder="请输入搜索关键词" @search="handlerSearch" />
    </van-sticky>
    <div class="hot-search">
      <div v-if="searchPar.keywords == ''" class="tips-hot">
        <span v-for="(item, index) in tipsHotData" :key="index" class="tips-hot-item" @click="hotSerach(item)">{{ item.first }}</span>
      </div>
      <van-list v-else class="hot-van-list" finished-text="没有更多了">
        <div class="title">热门搜索</div>
        <div class="content" v-for="(item, index) in hotSearchData" :key="index" @click="handlerPlay(item)">
          <div class="hot-song-item">
            <div class="songInfo">{{ item.name }}</div>
            <div class="control">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-bofang"></use>
              </svg>
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import { search, hotSearch } from '@/api/searchApi.js'
import { useStore } from 'vuex'
export default {
  data() {
    return {
      hotSearchData: [],
      tipsHotData: [],
      searchRes: false,
      store: null,
      searchPar: {
        keywords: '', //关键词
        limit: 30, //莫默认30
      },
    }
  },
  created() {
    this.store = useStore()
    this.getHotSearch()
  },
  watch: {
    'searchPar.keywords'(newval, oldval) {
      if (newval != '') {
        this.handlerSearch()
      }
    },
  },
  methods: {
    getHotSearch() {
      hotSearch().then((res) => {
        this.tipsHotData = res.data.result.hots
        console.log(res.data.result.hots)
      })
    },
    handlerSearch() {
      this.searchRes = false
      search(this.searchPar).then((res) => {
        console.log(res)
        if (res.data.code !== 200) {
          this.searchRes = true
          return
        }
        this.hotSearchData = res.data.result.songs
      })
    },
    //点击播放推荐新音乐
    //点击播放音乐
    handlerPlay(val) {
      console.log(val, 333)
      //   this.store.commit('gg')
      this.store.dispatch('setSongList', val)
      this.$router.push({ path: '/playView', query: { id: val.id, name: val.name } })
    },
    //点击热门搜索
    hotSerach(val) {
      this.searchPar.keywords = val.first
    },
  },
}
</script>

<style lang="less" scoped>
.van-search {
  border-top: #fff 2px solid;
}
.hot-van-list {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  .content {
    width: 96%;
    .hot-song-item {
      width: calc(100% - 0.4rem);
      height: 1.5rem;
      border-top: #ebeef5 solid 1px;
      border-bottom: #ebeef5 solid 1px;
      display: flex;
      padding: 0 0.2rem;
      .songInfo {
        flex: 3;
        height: 100%;
      }
      .control {
        flex: 1;
        height: 100%;
        justify-content: end;
      }
      .songInfo,
      .control {
        display: flex;
        align-items: center;
      }
    }
  }
}
.title {
  height: 0.8rem;
  width: 98%;
  display: flex;
  align-items: center;
  padding-left: 10px;
  margin-bottom: 10px;
  font-size: 0.4rem;
  color: #606266;
  font-weight: 540;
}
.tips-hot {
  //   display: flex;
  .tips-hot-item {
    display: inline-block;
    border: #dcdfe6 1px solid;
    padding: 6px 10px;
    border-radius: 0.5rem;
    margin: 0.1rem;
    color: #909399;
  }
}
</style>